let openpill= <HTMLInputElement>document.getElementById('openpill')
openpill.addEventListener('click', async () => {
    var pill = document.querySelector('.pill') as HTMLElement;
    var h2 = document.querySelector('h2') as HTMLElement;
    var key = document.querySelector('.key') as HTMLInputElement;
    var now = moment().format('YYYY-MM-DD HH:mm:ss');
    if (key.value) {
        let res = await fetch('http://127.0.0.1:3280/api/get', {
            method: 'POST',
            body: JSON.stringify({
                id: key.value
            })
        })
        let ifo = await res.json() 
        if (ifo.stat!="not_found") {
            (<HTMLElement>document.querySelector('.tips')).style.display = 'none';
            pill.style.display = 'inline-block';
            var timestring = String(ifo.time).replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/g, '$1-$2-$3 $4:$5:$6');
            var s = moment(now).diff(moment(timestring), "seconds");
            if (s >= 0) {
                h2.innerHTML = ifo.name + ' 在 ' + timestring + ' 想对你说';
                document.querySelector('pre').innerHTML = ifo.content;
            } else {
                s = -s;
                h2.innerHTML = "这颗胶囊未到提取时间，不能打开";
                document.querySelector('span').innerHTML = '打开时间在 ' + "<b>" + timestring + "</b>" + '，距离现在 ' + "<b>" + s + "</b>" + ' 秒。';
                document.getElementById('tip').innerHTML = "<b>" + ifo.name + "</b>" + "<span>给你留的提示信息:</span>";
                document.querySelector('pre').innerHTML = ifo.tip;
                setInterval(function () {
                    s--;
                    if (s > 0) {
                        document.getElementsByTagName('b')[1].innerHTML = s;
                    } else {
                        h2.innerHTML = ifo.name + ' 在 ' + timestring + ' 想对你说';
                        document.querySelector('span').innerHTML =''
                        document.getElementById('tip').innerHTML =''
                        document.querySelector('pre').innerHTML = ifo.content;
                        clearInterval();
                    }
                }, 1000);
            }
        } else {
            (<HTMLElement>document.querySelector('.tips')).style.display = 'block';
        }

    }
})